<!--系统管理 --- 组织机构 --- 角色管理 -->
<template>
  <div class="mechanism" id="pages">
    <div class="mechanism_box">
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left">
          <input
            type="text"
            placeholder="请输入关键字"
            v-model="queryCriteria.keyWord"
          />
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getBaseRoleList"
            >查询</el-button
          >
        </div>
        <!-- 右侧 -->
        <div class="print">
          <div class="printTable">
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="small"
              @click="getDataList(companyId)"
            ></el-button>
            <el-button
              type="primary"
              v-if="lr_add"
              icon="el-icon-circle-plus-outline"
              size="small"
              @click="getBaseRoleDetail(0)"
              >新增
            </el-button>
            <el-button
              type="primary"
              v-if="lr_edit"
              icon="el-icon-edit"
              size="small"
              @click="getBaseRoleDetail(1)"
              >编辑
            </el-button>
            <el-button
              type="primary"
              v-if="lr_delete"
              icon="el-icon-delete"
              size="small"
              @click="rowDelete(currentRoleid)"
              >删除
            </el-button>
            <el-button
              type="primary"
              v-if="lr_memberadd"
              icon="el-icon-coordinate"
              size="small"
              @click="memberDetail('0')"
              >添加成员</el-button
            >
            <el-button
              type="primary"
              v-if="lr_memberlook"
              icon="el-icon-document-copy"
              size="small"
              @click="memberDetail('1')"
              >查看成员
            </el-button>
            <el-button
              type="primary"
              v-if="lr_authorize"
              icon="el-icon-folder-checked"
              size="small"
              @click="memberDetail('2')"
              >功能授权
            </el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="mechanism_Table" id="mianBody">
        <el-table
          :data="tableData"
          style="width: 100%"
          :height="navigatepageNums > 1 ? 'calc(100% - 50px)' : '100%'"
          default-expand-all
          row-key="fCompanyid"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          :row-class-name="tableRowClassName"
          border
          stripe
          highlight-current-row
          @row-click="getRowInfo"
        >
          <el-table-column
            fixed
            type="index"
            :index="hIndex"
            width="60"
            align="center"
          >
          </el-table-column>

          <el-table-column prop="fEncode" sortable label="角色编号" width="200">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fEncode">{{
                  scope.row.fEncode
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fRolename" label="角色名称" width="200">
          </el-table-column>
          <el-table-column
            prop="fCreatedates"
            label="创建时间"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="fCreateusername"
            label="创建人"
            align="center"
            width="130"
          >
          </el-table-column>

          <el-table-column prop="fNote" label="角色描述" width="300">
          </el-table-column>
        </el-table>
        <!--  -->
        <div class="block" v-if="navigatepageNums > 1">
          <div class="paginationInfo">
            检索到
            {{ queryCriteriaData.total }} 条记录 | 显示第
            <span v-if="queryCriteria.page == 1">{{ queryCriteria.page }}</span
            ><span v-else>{{ 20 * (queryCriteria.page - 1) }}</span>
            <!-- {{ 20 * queryCriteria.page }} 条记录 -->
            -
            <span v-if="queryCriteriaData.pages == queryCriteriaData.lastPage">
              {{ queryCriteriaData.total }}</span
            >
            <span v-else> {{ 20 * queryCriteria.page }} </span>
            条记录
          </div>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryCriteria.page"
            :page-size="queryCriteria.pageSize"
            layout="prev, pager, next, jumper"
            :total="queryCriteriaData.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!--弹框 编辑 -->
    <div class="Control-1 samll">
      <el-dialog
        :close-on-click-modal="false"
        :title="editDialog"
        v-dialogDrag
        :visible.sync="dialogTableVisible"
        v-loading="loadingDialog"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <div class="dialogBody common" :style="{ height: dialogHeight }">
          <el-form :model="formData" :rules="rules" ref="formData">
            <div class="tableRow">
              <el-form-item
                label="角色编号"
                prop="fEncode"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="formData.fEncode"
                  autocomplete="off"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <div class="tableRow">
              <el-form-item
                label="角色名称"
                prop="fRolename"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="formData.fRolename"
                  autocomplete="off"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>

            <div class="tableRow" style="margin-top: 10px">
              <el-form-item
                label="角色描述"
                prop="fNote"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="formData.fNote"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入"
                  autocomplete="off"
                >
                </el-input>
              </el-form-item>
            </div>

            <el-form-item class="newlyAdded_btn">
              <el-button type="primary" @click="submitForm('formData')"
                >保存</el-button
              >
              <el-button type="warning" @click="resetForm('formData')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 查看成员 -->
    <div class="Control-1 MemberCommon mechanism_dialog">
      <!--  -->
      <el-dialog
        :close-on-click-modal="false"
        :title="MemberTitle"
        v-dialogDrag
        :visible.sync="memberVisible"
        v-loading="loadingMemberDialog"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <div class="dialogBody member" :style="{ height: MemberDialogHeight }">
          <!-- 查看成员 -->
          <div v-show="MemberFlag == 1" class="MemberDialogBox">
            <noData v-if="MemberData.length == 0"></noData>
            <div
              class="userInfo"
              v-else
              v-for="(item, index) in MemberData"
              :key="index"
            >
              <!--  -->
              <div class="MemberIcon">
                <img src="@/assets/img/organization/boys.png" alt="" />
              </div>
              <div class="MemberDetailInfo">
                <div class="name">{{ item.fRealname }}</div>
                <div class="hostName">{{ item.fDepartmentName }}</div>
                <div class="hostName">{{ item.fAccount }}</div>
              </div>
            </div>
          </div>
          <!-- 添加成员 -->
          <div v-show="MemberFlag == 0" class="MemberDialogBox">
            <div class="addMemberCheckBox">
              <div class="addMemberCheckTree">
                <div class="companyBox">
                  <el-tree
                    :data="companyInfo"
                    :props="defaultProps"
                    @node-click="selectCompany"
                    :highlight-current="highlightBd"
                  ></el-tree>
                </div>
                <div class="departmentBox">
                  <div
                    class="departmentTitle"
                    v-for="(item, index) in departmentList"
                    :key="index"
                    @click="seletDepartment(item, index)"
                  >
                    <a
                      href="javascript:;"
                      :class="num === item.fDepartmentId ? 'activetext' : ''"
                      :title="item.fShortName"
                    >
                      {{ item.fShortName }}</a
                    >
                  </div>
                </div>
              </div>

              <div class="addMemberCheckLeft">
                <el-checkbox-group
                  v-model="checkboxGroup1"
                  @change="selectRealname($event, personList)"
                >
                  <el-checkbox-button
                    v-for="item in personList"
                    :label="item.fUserid"
                    :key="item.fUserid"
                    :value="item.fRealname"
                  >
                    <div class="addMemberCheck">
                      <div class="MemberIcon">
                        <!--  -->
                        <!-- -->
                        <img :src="item.fGender == 0 ? girls : boys" alt="" />
                      </div>
                      <div class="MemberDetailInfos">
                        <div class="name">{{ item.fRealname }}</div>
                        <div class="hostName">{{ item.fDepartmentName }}</div>
                        <div class="hostName">{{ item.fAccount }}</div>
                      </div>
                    </div>
                  </el-checkbox-button>
                </el-checkbox-group>
              </div>

              <div class="selectPerson">
                <div class="selectPersonTitle">
                  已选人员（{{ newData.length }}人）
                </div>
                <div class="selectPersonData">
                  <div
                    class="selectPersonDataBox"
                    v-for="item in newData"
                    :label="item.fRealname"
                    :key="item.fRealname"
                  >
                    <div class="MemberIcon">
                      <img :src="item.fGender == 0 ? girls : boys" alt="" />
                    </div>
                    <div class="MemberDetailInfo1">
                      <div class="name">{{ item.fRealname }}</div>
                      <div class="hostName">{{ item.fDepartmentName }}</div>
                      <div class="hostName">{{ item.fAccount }}</div>
                    </div>
                    <div
                      class="deleteUser"
                      @click="deteleUser(item.fUserid)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <div class="newlyAdded_btns">
              <el-button type="primary" @click="submitMember('formData')"
                >保存</el-button
              >
              <el-button type="warning" @click="memberVisible = false"
                >关闭</el-button
              >
            </div>
          </div>
        </div>
      </el-dialog>
    </div>

    <!-- 功能授权 -->
    <div class="Control-1 samlls mechanism_dialog">
      <!--  -->
      <el-dialog
        :close-on-click-modal="false"
        width="50%"
        :title="MemberTitle"
        v-dialogDrag
        :visible.sync="authorizationVisible"
        v-loading="loadingauthorizationDialog"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <div class="dialogBody" :style="{ height: MemberDialogHeight }">
          <el-steps :active="active" finish-status="success" simple>
            <el-step title="系统功能"> </el-step>
            <el-step title="系统按钮"></el-step>
          </el-steps>
          <div v-if="actives == 1" class="samllDialogs">
            <!-- <div class="treeModule"> -->
            <!--  @check-change="SelectModule" -->
            <el-tree
              ref="moduleTree"
              :data="moduleList"
              show-checkbox
              default-expand-all
              node-key="fModuleid"
              highlight-current
              :props="defaultroleProps"
              :default-checked-keys="defaultCheckedData"
            >
            </el-tree>
          </div>
          <div v-if="actives == 2" class="samllDialogs">
            <!-- @check-change="SelectModuleList" -->
            <el-tree
              ref="moduleListTree"
              :data="modulebuttonlistData"
              show-checkbox
              default-expand-all
              node-key="fModuleid"
              highlight-current
              :props="defaultroleProps1"
              :default-checked-keys="defaultCheckedBtnData"
            >
            </el-tree>
          </div>
          <div class="newlyAdded_btn">
            <el-button type="warning" @click="prev" :disabled="prevStr"
              >上一步</el-button
            >
            <el-button type="warning" @click="next" :disabled="nextStr"
              >下一步</el-button
            >
            <el-button
              type="primary"
              @click="submitBtnForm('formData')"
              :disabled="saveStr"
              >保存</el-button
            >
            <!-- <el-button type="warning" @click="resetForm('formData')">重置</el-button> -->
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import noData from "@/components/public/noData.vue";
import {
  getBaseRoleList,
  getBaseRoleDetail,
  getBaseRoleAdd,
  getBaseRoleDelete,
  getRoleUserList,
  getBaseCompanyList,
  getBaseDepartmentUser,
  addBaseRoleUser, //添加成员
  getBaseRoleModuleList, //角色管理-查询当前角色模块按钮权限
  addBaseRoleModule,

  // getBaseUserPageList,//用户接口
} from "@/api/request.js";
// import { Select } from "element-ui";
export default {
  inject: ["reload"],
  data() {
    return {
      name: "roleManagement",
      lr_add: null,
      lr_edit: null,
      lr_delete: null,
      lr_memberadd: null,
      lr_memberlook: null,
      lr_authorize: null,

      active: 1,
      actives: 1,
      prevStr: true,
      nextStr: false,
      saveStr: true,
      highlightBd: true,
      defaultCheckedData: [],
      defaultCheckedBtnData: [],
      boys: require("@/assets/img/organization/boys.png"),
      girls: require("@/assets/img/organization/girls.png"),

      tableData: [],
      loading: false,
      rules: {
        fEncode: [
          { required: true, message: "请输入角色编码", trigger: "blur" },
          { min: 1, max: 25, message: "请输入角色编码", trigger: "blur" },
        ],
        fRolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          // { min: 1, max: 25, message: "请输入角色编码", trigger: "blur" },
        ],

        fNote: [
          { required: false, message: "请输入角色名称", trigger: "blur" },
          { min: 1, max: 25, message: "请输入角色编码", trigger: "blur" },
        ],
      },
      formData: {
        fEncode: "", //角色编码
        fRolename: "", //角色名称

        fNote: "", //角色描述
        fRoleid: "", //角色主键id
        fCreateusername: "", //创建人
        fCreatedates: "", //创建时间
      }, //角色详情
      queryCriteria: {
        //列表查询条件
        page: 1, //页码
        pageSize: 20, //每页条数
        keyWord: "", //模糊查询字段
      },
      queryCriteriaData: {},

      currentRoleid: "", //当前角色id
      loadingDialog: false,
      dialogTableVisible: false,
      authorizationVisible: false,
      loadingauthorizationDialog: false,
      dialogHeight: null,
      formLabelWidth: "90px",
      // 查看成员弹框
      loadingMemberDialog: false,
      memberVisible: false,
      MemberDialogHeight: null,
      MemberData: [],
      MemberFlag: null, //点击成员按钮标志
      MemberTitle: null, //查看角色成员Dialog
      checkboxGroup1: [],

      cities: ["上海", "北京", "广州", "深圳"],
      input2: "", //公司模糊查询
      navigatepageNums: null, //是否显示分页
      companyInfo: [], //公司树信息
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      defaultroleProps: {
        children: "children",
        label: "fFullname",
      },
      defaultroleProps1: {
        children: "children",
        label: "fFullname",
      },
      companyTreeData: [], //公司
      departmentList: [], //部门
      num: null,
      personList: [], //人员列表新增
      editDialog: null,
      allUserInfo: [],
      newData: [],
      currentName: null,
      moduleList: [], //角色模块列表
      moduleLists: [],
      modulebuttonlist: [], //按钮列表

      moduleData: [],
      modulebuttonlistData: [], //系统按钮数据
      parentData: [],
      childrenData: [],
    };
  },
  mounted() {
    // 获取角色列表
    this.getBaseRoleList();
    this.getHeight();
    // 获取组织机构单位
    this.getBaseCompanyList();
    this.btnRole(this.name);
    // this.seletDepartment()
  },
  components: {
    noData,
  },
  computed: {
    hIndex() {
      // 当前页数 - 1 * 每页数据条数 + 1
      return (this.queryCriteria.page - 1) * this.queryCriteria.pageSize + 1;
    },
  },
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("yjSmart-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });

        this.lr_add = btnStr.includes("lr_add");
        this.lr_edit = btnStr.includes("lr_edit");
        this.lr_delete = btnStr.includes("lr_delete");
        this.lr_memberadd = btnStr.includes("lr_memberadd");
        this.lr_memberlook = btnStr.includes("lr_memberlook");
        this.lr_authorize = btnStr.includes("lr_authorize");
      } else {
        this.lr_add = true;
        this.lr_edit = true;
        this.lr_delete = true;
        this.lr_memberadd = true;
        this.lr_memberlook = true;
        this.lr_authorize = true;
      }
    },

    SelectModuleList(e, v) {
      return e, v;
    },
    next() {
      if (this.active++ > 1) this.active = 2;
      this.actives = 2;
      var parentData = this.$refs.moduleTree.getHalfCheckedNodes(); //半选父级

      this.parentData = parentData;
      var childrenData = this.$refs.moduleTree.getCheckedNodes(); //全选子集

      this.childrenData = childrenData;
      var checkedData = [];
      childrenData.map((item) => {
        //获取已选框id
        checkedData.push(item.fModuleid);
      });
      parentData.map((item) => {
        //清空半选父级children
        item["children"] = [];
      });
      childrenData.map((item) => {
        //为全选加children
        item["children"] = [];
      });

      childrenData.map((item) => {
        this.modulebuttonlist.map((i) => {
          if (item.fModuleid == i.fModulebuttonid) {
            //模块绑定按钮
            item.children.push(i);
            // buttonId.push(i)
            if (i.isCheck == 1) {
              this.defaultCheckedBtnData.push(i.fModuleid);
            }
          }
        });
      });

      sessionStorage.setItem(
        "yjSmart-defaultCheckedBtnData",
        JSON.stringify(this.defaultCheckedBtnData)
      );
      this.modulebuttonlistData = this.ToTreeData(
        parentData.concat(childrenData)
      );

      this.prevStr = false;
      this.nextStr = true;
      this.saveStr = false;

      sessionStorage.setItem("yjSmart-defaultCheckedData", JSON.stringify(checkedData));
      this.defaultCheckedBtnData = JSON.parse(
        sessionStorage.getItem("yjSmart-defaultCheckedBtnData")
      );
    },
    // 功能授权按钮保存
    submitBtnForm() {
      // var parentData = this.$refs.moduleListTree.getHalfCheckedNodes();//半选父级
      var childrenData = this.$refs.moduleListTree.getCheckedNodes(); //全选子集

      var moduleList = [];

      var parantList = this.childrenData.concat(this.parentData);

      parantList.map((item) => {
        moduleList.push({
          fModuleid: item.fModuleid,
        });
      });
      var Modulebutton = childrenData.filter((item) => {
        if (item.fModulebuttonid) {
          return item;
        }
      });

      // fModuleid
      var modulebuttonlist = [];
      Modulebutton.map((item) => {
        modulebuttonlist.push({
          fModulebuttonid: item.fModuleid,
        });
      });
      var datas = {
        fRoleid: this.currentRoleid,
        moduleList: moduleList,
        modulebuttonlist: modulebuttonlist,
      };
      addBaseRoleModule(datas).then((res) => {
        if (res.errcode == 0) {
          this.reload();
          this.$message.success("授权成功");
        } else {
          this.$message.error("授权失败", res.msg);
        }
      });
    },
    prev() {
      // var parentData = this.$refs.moduleListTree.getHalfCheckedNodes(); //半选父级
      var childrenData = this.$refs.moduleListTree.getCheckedNodes(); //全选子集
      var checkedData = [];

      childrenData.map((item) => {
        //获取已选框id
        checkedData.push(item.fModuleid);
      });
      sessionStorage.setItem(
        "yjSmart-defaultCheckedBtnData",
        JSON.stringify(checkedData)
      );

      this.moduleList = JSON.parse(sessionStorage.getItem("yjSmart-moduleLists"));
      this.defaultCheckedData = JSON.parse(
        sessionStorage.getItem("yjSmart-defaultCheckedData")
      );

      // 选择模块
      this.active = 1;
      this.actives = 1;
      this.prevStr = true;
      this.nextStr = false;
    },

    // 删除用户
    deteleUser(id) {
      this.newData = this.newData.filter((item) => {
        return item.fUserid != id;
      });
      this.checkboxGroup1 = this.checkboxGroup1.filter((item) => {
        return item != id;
      });
    },
    selectRealname(e, data) {
      this.allUserInfo = this.allUserInfo.concat(data);
      let obj = {};
      let reduce = [];
      reduce = this.allUserInfo.reduce((item, next) => {
        //item为没有重复id的数组，next为当前对象
        obj[next.fUserid] ? "" : (obj[next.fUserid] = true && item.push(next));
        return item;
      }, []);
      this.newData = [];
      reduce.map((item) => {
        this.checkboxGroup1.map((i) => {
          if (item.fUserid == i) {
            this.newData.push(item);
          }
        });
      });
    },
    // 选择公司
    selectCompany(e) {
      this.getBaseDepartmentUser(e.fCompanyid);
    },
    // 选择部门
    seletDepartment(e) {
      this.num = e.fDepartmentId;
      this.personList = [];

      let obj = {};
      // let reduce = [];
      this.personList = e.personList.reduce(function (item, next) {
        //item为没有重复id的数组，next为当前对象
        obj[next.fUserid] ? "" : (obj[next.fUserid] = true && item.push(next));
        return item;
      }, []);
    },
    // 获取组织机构单位
    getBaseCompanyList() {
      getBaseCompanyList({})
        .then((res) => {
          if (res.errcode == 0) {
            this.companyTreeData = res.data.baseCompanyList;
            this.companyInfo = this.tranListToTreeData(
              res.data.baseCompanyList
            );
          } else {
            this.$message.error("获取组织机构单位", res.msg);
          }
        })
        .catch((error) => {
          console.log("获取组织机构单位,接口报错", error);
        });
    },
    // getDepartmentList()
    ToTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      let map = {};
      data.forEach((item) => {
        map[item.fModuleid] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },

    tranListToTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的数据  重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.fCompanyid] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    // 新增角色保存
    submitMember() {
      var data = {
        fRoleid: this.currentRoleid,
        userList: this.newData,
      };
      addBaseRoleUser(data).then((res) => {
        if (res.errcode == 0) {
          this.reload();
          this.$message.success("新增成功");
        } else {
          this.$message.error("新增角色", res.msg);
        }
      });
    },
    // 部门管理-查询部门列表以及下属人员
    getBaseDepartmentUser(id) {
      getBaseDepartmentUser({ fCompanyid: id })
        .then((res) => {
          if (res.errcode == 0) {
            this.departmentList = res.data.childList;
          } else {
            this.$message.error("部门管理-查询部门列表以及下属人员", res.msg);
          }
        })
        .catch((error) => {
          console.log("部门管理-查询部门列表以及下属人员,接口报错", error);
        });
    },
    // 查看成员
    memberDetail(num) {
      if (this.currentRoleid != null && this.currentRoleid != "") {
        this.checkboxGroup1 = [];
        this.departmentList = [];
        this.personList = [];
        this.MemberFlag = num;
        if (this.MemberFlag == 1) {
          this.memberVisible = true;
          this.MemberTitle = "查看角色成员";
          this.loadingMemberDialog = true;
          getRoleUserList({ fRoleid: this.currentRoleid })
            .then((res) => {
              if (res.errcode == 0) {
                this.loadingMemberDialog = false;
                this.MemberData = res.data.roleUserList;
              } else {
                this.$message.error("查看角色成员", res.msg);
                this.loadingMemberDialog = false;
              }
            })
            .catch((error) => {
              console.log("查看角色成员接口报错", error);
              this.loadingMemberDialog = false;
            });
        } else if (this.MemberFlag == 0) {
          this.memberVisible = true;
          this.MemberTitle = "添加角色成员";
          this.loadingMemberDialog = true;
          getRoleUserList({ fRoleid: this.currentRoleid })
            .then((res) => {
              if (res.errcode == 0) {
                this.loadingMemberDialog = false;
                this.newData = res.data.roleUserList;
                this.allUserInfo = this.allUserInfo.concat(
                  res.data.roleUserList
                );
                this.newData.map((item) => {
                  this.checkboxGroup1.push(item.fUserid);
                });
              } else {
                this.$message.error("添加角色成员", res.msg);
                this.loadingMemberDialog = false;
              }
            })
            .catch((error) => {
              console.log("添加角色成员,接口报错", error);
              this.loadingMemberDialog = false;
            });
        } else if (this.MemberFlag == 2) {
          this.actives = 1;
          this.active = 0;
          this.prevStr = true;
          this.nextStr = false;
          this.MemberTitle = "功能授权-" + this.currentName;
          this.loadingauthorizationDialog = true; //loading
          this.authorizationVisible = true; //弹框
          sessionStorage.removeItem("yjSmart-defaultCheckedBtnData");
          // 角色管理-查询当前角色模块按钮权限
          getBaseRoleModuleList({ fRoleid: this.currentRoleid })
            .then((res) => {
              if (res.errcode == 0) {
                this.loadingauthorizationDialog = false; //loading
                this.moduleData = res.data.moduleList;
                var checkedData = [];
                res.data.moduleList.map((item) => {
                  if (item.isCheck == 1) {
                    // this.defaultCheckedData.push(item.fModuleid)
                    checkedData.push(item.fModuleid);
                  }
                });
                this.$nextTick(() => {
                  const nodes = [];
                  checkedData.forEach((item) => {
                    const node = this.$refs.moduleTree.getNode(item);
                    if (node.isLeaf) {
                      //关键，过滤掉不是叶子节点的
                      nodes.push(item);
                    }
                  });
                  this.$refs.moduleTree.setCheckedKeys(nodes, true);
                });
                sessionStorage.setItem(
                  "yjSmart-moduleLists",
                  JSON.stringify(this.ModleTreeData(res.data.moduleList))
                );
                this.modulebuttonlist = res.data.modulebuttonlist;
                this.moduleList = this.ModleTreeData(res.data.moduleList);
              } else {
                this.$message.error("按钮权限", res.msg);
                this.loadingauthorizationDialog = false; //loading
              }
            })
            .catch(() => {
              console.log("按钮权限接口报错");
              this.loadingauthorizationDialog = false; //loading
            });
        }
      } else {
        return this.$message.error("请先选择需要编辑的机构");
      }
    },

    ModleTreeData(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的数据  重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.fModuleid] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    // 页面切换
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryCriteria.page = val;
      this.getBaseRoleList();
    },
    // 获取高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      // var w = document.documentElement.clientWidth; //获取页面可见高度
      // 新增编辑Dialog高度
      this.dialogHeight = h * 0.4 + "px";
      // 成员Dialog高度
      this.MemberDialogHeight = h * 0.66 + "px";
    },
    // 获取角色列表
    getBaseRoleList() {
      getBaseRoleList(this.queryCriteria)
        .then((res) => {
          if (res.errcode == 0) {
            this.tableData = res.data.baseRoleList.list;
            this.queryCriteriaData = res.data.baseRoleList;
            this.navigatepageNums =
              this.queryCriteriaData.navigatepageNums.length;
          } else {
            this.$message.error("获取角色列表", res.msg);
          }
        })
        .catch((error) => {
          console.log("获取角色列表,接口报错", error);
        });
    },
    // 获取角色详情
    getBaseRoleDetail(status) {
      if (status == 1) {
        this.editDialog = "编辑角色";
        if (this.currentRoleid != null && this.currentRoleid != "") {
          this.dialogTableVisible = true;
          this.loadingDialog = true;
          getBaseRoleDetail({ fRoleid: this.currentRoleid })
            .then((res) => {
              if (res.errcode == 0) {
                this.loadingDialog = false;
                this.formData = res.data.lrBaseRole;
              } else {
                this.$message.error("编辑角色", res.msg);
                this.loadingDialog = false;
              }
            })
            .catch((error) => {
              console.log("编辑角色,接口报错", error);
              this.loadingDialog = false;
            });
        } else {
          return this.$message.error("请先选择需要编辑的机构");
        }
      } else if (status == 0) {
        this.editDialog = "新增角色";
        this.dialogTableVisible = true;
        this.currentRoleids = "";
        this.currentRoleid = "";
        this.formData.fRoleid = "";

        this.formData = {
          fEncode: "", //角色编码
          fRolename: "", //角色名称

          fNote: "", //角色描述
          fRoleid: "", //角色主键id
          fCreateusername: "", //创建人
          fCreatedates: "", //创建时间
        }; //角色详情

        if (this.currentRoleids != null && this.currentRoleids != "") {
          this.$refs.formData.resetFields();
        }
      }
    },
    //  确认修改： 新增修改
    submitForm() {
      this.$refs.formData.validate(async (valid) => {
        if (valid) {
          this.formData.fRoleid = this.currentRoleid;
          getBaseRoleAdd(this.formData)
            .then((res) => {
              if (res.errcode == 0) {
                this.reload();
                this.$message.success("新增成功");
              } else {
                this.$message.error("确认修改/新增修改", res.msg);
              }
            })
            .catch((error) => {
              console.log("确认修改/新增修改,接口报错", error);
            });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 重置
    resetForm() {
      this.$refs.formData.resetFields();
    },
    // 删除
    rowDelete(id) {
      if (id != "" && id != null) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.loading = true;
            getBaseRoleDelete({ fRoleid: id })
              .then((res) => {
                if (res.errcode == 0) {
                  this.loading = false;
                  this.reload();
                  this.$message.success("删除成功");
                } else {
                  this.$message.error("删除失败", res.msg);
                  this.loading = false;
                }
              })
              .catch(() => {
                console.log("删除接口报错");
                this.loading = false;
              });
          })
          .catch(() => {
            this.$message("取消删除");
          });
      } else {
        return this.$message.error("请先选择需要删除的数据");
      }
    },
    getRowInfo(e) {
      this.currentRoleid = e.fRoleid;
      this.currentRoleids = e.fRoleid; //新增
      this.currentName = e.fRolename;
    },
    tableRowClassName({ row }) {
      if (
        (row.fParentid == 0 && !row.children) ||
        (row.fParentid == null && !row.children)
      ) {
        return "fristColor";
      }
    },
  },
};
</script>

<style scoped lang="less">
.mechanism {
  padding: 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.mechanism_box {
  width: 100%;
  height: 100%;
  border: solid 1px #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.mechanism_Table {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.block {
  /* height: 50px; */
  position: fixed;
  padding: 5px 10px;
  width: calc(100vw - 241px);
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  border-top: 1px solid #ebeef5;
}

.member {
  /* background: linear-gradient(90deg, #0934a3, #209ec3); */
  padding: 10px 25px 5px !important;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around;
  align-items: center; */
}

.userInfo {
  width: 160px;
  height: 64px;
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 2px;
  display: flex;
  align-items: center;
  margin: 8px;
  box-sizing: border-box;

  .MemberIcon {
    height: 100%;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    background: rgba(241, 241, 241, 1);

    img {
      width: 37.81px;
      height: 39.38px;
      border-radius: 50%;
    }
  }

  .MemberDetailInfo {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    .name {
      color: rgba(51, 51, 51, 1);
      font-size: 12px;
      height: 20px;
      line-height: 20px;
    }

    .hostName {
      color: rgba(128, 125, 125, 1);
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
    }
  }
}

// .zhanghu {
//   width: 80%;
//   text-align: left;
// }

.MemberDialogBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  .selectMember {
    width: 180px;
  }

  .selectMemberBox {
    height: 40px;
    width: 100%;
    display: flex;
    padding-bottom: 5px;

    .selectMemberLeft {
      width: 30%;
      box-sizing: border-box;
    }

    .selectMemberRight {
      display: flex;
      align-items: center;
      width: 52%;
      // padding: 0 0 0 20px;
    }
  }
}

.addMemberCheckBox {
  width: 100%;
  height: 93%;
  display: flex;

  .addMemberCheckTree {
    width: 30%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(221, 221, 221, 1);
    box-sizing: border-box;

    .companyBox {
      height: 70%;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .departmentBox {
      height: 30%;
      border-top: 0.5px solid rgba(221, 221, 221, 1);
      /* border: 1px solid red; */
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      overflow: hidden;
      overflow-y: auto;

      .departmentTitle {
        width: 77px;
        text-align: center;
        height: 40px;
        margin: 5px;
        // border: 1px solid green;
        border-radius: 8px;
        background: #d4daea;
        overflow: hidden;

        a {
          width: 100%;
          height: 100%;
          display: block;
          text-decoration: none;
        }
      }
    }
  }

  .selectMemberLeft {
    display: flex;
    align-items: center;
  }

  .addMemberCheckLeft {
    width: 52%;
    padding: 0 0 0 20px;
    border-top: 1px solid rgba(221, 221, 221, 1);
    border-bottom: 1px solid rgba(221, 221, 221, 1);
    border-right: 1px solid rgba(221, 221, 221, 1);

    .addMemberCheck {
      width: 150px;
      height: 64px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.newlyAdded_btns {
  height: 8%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.addMemberCheckBox .selectPerson {
  width: 18%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-left: 15px;
  box-sizing: border-box;

  .selectPersonTitle {
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(241, 241, 241, 1);
    border-bottom: 1px solid rgba(221, 221, 221, 1);
    color: rgba(128, 125, 125, 1);
    font-size: 12px;
  }

  .selectPersonData {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;

    .selectPersonDataBox {
      width: 150px;
      height: 72px;
      border-radius: 2px;
      border: 1px solid rgba(222, 222, 222, 1);
      margin: 8px 0;
      display: flex;
      position: relative;

      .MemberIcon {
        height: 100%;
        width: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        background: rgba(241, 241, 241, 1);

        img {
          width: 37.81px;
          height: 39.38px;
          border-radius: 50%;
        }
      }

      .MemberDetailInfo1 {
        position: relative;
        flex: 1;
        height: 100%;
        padding: 14px 0;
        overflow: hidden;

        .name {
          color: rgba(51, 51, 51, 1);
          font-size: 12px;
          height: 20px;
          line-height: 5px;
        }

        .hostName {
          color: rgba(128, 125, 125, 1);
          font-size: 12px;
          height: 20px;
          line-height: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

// .selectPersonDataBox .zhanghu {
//   width: 80%;
//   text-align: left;
// }

.addMemberCheck .MemberIcon {
  /* height: 100%; */
  /* height: 54px; */
  height: 62px;
  width: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-right: 8px;
  background: rgba(241, 241, 241, 1);
}

.MemberIcon img {
  width: 37.81px;
  height: 39.38px;
  border-radius: 50%;
}

.MemberDetailInfos {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;

  .name {
    color: rgba(51, 51, 51, 1);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }

  .hostName {
    color: rgba(128, 125, 125, 1);
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// .userInfo .MemberDetailInfo {
//   position: relative;
//   flex: 1;
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
// }

.MemberIcon .name {
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  height: 20px;

  line-height: 20px;
}

.MemberIcon .hostName {
  color: rgba(128, 125, 125, 1);
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activetext {
  color: rgba(197, 227, 255, 1);
  background: #2b5a9d;
}

.MemberDetailInfo::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  display: block;
  background: url("../../../assets/img/organization/yes.png") no-repeat;
  background-size: 100% 100%;
  right: 0;
  top: 0;
}

.deleteUser {
  // content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  display: block;
  background: url("../../../assets/img/organization/no.png") no-repeat;
  background-size: 100% 100%;
  right: 0;
  top: 0;
}

.samllDialogs {
  display: flex;
  // flex-direction: column;
  margin: 0 20px;
  // border: 1px solid red;
  padding-top: 50px;

  // height: 300px;
  .treeModule {
    flex: 1;
  }
}

a {
  text-decoration: none;
  color: #000;
}
/deep/ .el-steps--simple {
  width: 90%;
}
</style>